<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Battleships</title>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<link rel="design" type="text/css" href="design.css" />
<script SRC="grid.js"></script>

<style>
.ship { width: 25px }​
</style>

<script>
$(document).ready(function() {
	$(".ship").draggable({
		containment: "document"
	});
	$(".ship").droppable()
});
</script>
</head>

<body>
<div id="container">
	<div class="ship" style="height:25"><img src="Images/batt0.gif"></div>
	<div class="ship" style="height:50"><img src="Images/batt2fin.gif"></div>
	<div class="ship" style="height:75"><img src="Images/batt3fin.gif"></div>
	<div class="ship" style="height:100"><img src="Images/batt4fin.gif"></div>
</div>​

</body>
</html>